<template>
  <div>
    <div class="main">
      <img class="tedu" src="@/assets/tedu_white.png" alt="" />
      <div class="login_frame">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <img class="logo" src="@/assets/logo.png" />
          <p class="title">CoolSharkMall</p>

          <el-input
            class="input"
            placeholder="请输入内容"
            v-model="ruleForm.username"
          >
            <img slot="prefix" src="@/assets/u8.svg" alt="" />
          </el-input>
          <el-input
            class="input"
            placeholder="请输入密码"
            type="password"
            show-password
            v-model="ruleForm.password"
          >
            <img slot="prefix" src="@/assets/u9.svg" alt="" />
          </el-input>

          <el-button
            class="button"
            type="primary"
            @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form>
        <p class="link">
          <router-link to="#">密码找回</router-link>
          &nbsp;
          <router-link to="#">注册账户</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
    };
  },
  methods: {
    /** 提交表单 */
    submitForm(formName) {
      console.log(this.ruleForm);
      if (
        this.ruleForm.username != undefined &&
        this.ruleForm.password != undefined
      ) {
        this.$api.userApi.login(this.ruleForm).then((res) => {
          console.log("用户登录", res);
          if (res.data.state == 200) {
            // 将登录结果更新到Vuex
            let userInfo = {
              username: this.ruleForm.username,
              nickname: "测试昵称：白月魁",
            };
            this.$store.commit("loginSuccess", userInfo);
            // 将token更新到Vuex
            let tokenInfo = res.data.data;
            this.$store.commit("saveToken", tokenInfo);
            // 跳转到首页
            this.$router.push("/");
          } else {
            this.$alert(res.data.message, "提示");
          }
        });
      } else {
        this.$alert("验证失败", "提示");
      }
    },
  },
};
</script>

<style scoped>
.tedu {
  width: 200px;
  margin: 50px;
}
.main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../../assets/login_background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.login_frame {
  border: 2px solid rgb(78, 191, 199);
  width: 480px;
  height: 500px;
  position: absolute;
  top: 50%;
  right: 20%;
  margin-top: -250px;
  background-color: rgb(184, 247, 238);
}
.logo {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0px auto;
}
.title {
  text-align: center;
  font-family: "微软雅黑";
  color: rgb(0, 149, 215);
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 15px;
}
.input {
  display: block;
  width: 90%;
  margin: 30px auto;
  border-radius: 0px;
  border: 1px solid rgb(18, 150, 219);
}
.el-input >>> .el-input__inner {
  border: 0px !important;
}
.el-input >>> .el-input__prefix {
  margin-top: 10px;
}
.button {
  display: block;
  width: 90%;
  margin: 20px auto;
  border-radius: 0px;
}
.link {
  width: 90%;
  margin: 10px auto;
  text-align: right;
}
.link >>> a {
  text-decoration: line-through;
  color: dodgerblue;
}
</style>
